<template>
  <view class="pageLayout">
    <u--form
      labelPosition="left"
      :model="form"
      :rules="rules"
      ref="MyForm"
      labelWidth="150rpx"
      :labelStyle="labelStyle"
    >
      <view class="base_info">
        <u-form-item labelPosition="top" prop="content" borderBottom>
          <view class="labelStyle" style="font-size: 24rpx">审批意见</view>
          <u--textarea
            v-model="form.content"
            border="none"
            height="50"
            placeholder="请输入"
          ></u--textarea>
        </u-form-item>
      </view>
      <u-button
        class="btn"
        :loading="loading"
        @click="submitForm"
        size="small"
        shape="circle"
        color="#a22d27"
        customStyle="margin-left: 20rpx;padding:8rpx 22rpx;border:1rpx solid #A22C26;color: #ffffff;font-weight:700;"
        >{{ type == 1 ? "驳回" : "同意" }}</u-button
      >
    </u--form>
    <mytoast ref="toastRef" />
  </view>
</template>
    <script>
import store from "../../../store/index";
import myPicker from "@/components/myPicker";
import customUpload from "@/components/customUpload.vue";
import mytoast from "@/components/mytoast.vue";
import {
  commitApprove,
  queryApproveDetailByID,
  cancelApprove,
  cancelStart,
  reject,
  approve,
} from "../../api/approval/index";
export default {
  components: {
    myPicker,
    customUpload,
    mytoast,
  },
  data() {
    return {
      // imgUrl: "https://www.yinyaoit.com",
      id: "",
      type: "", // 1:驳回 2:同意
      showLinkPicker: false, //链接状态
      showServiceTypePicker: false, //服务类型
      showLevelPicker: false, //SA分级
      showNotPicker: false, //签约结果
      showPicker: false, //
      loading: false,
      fileList: [],

      labelStyle: {
        "font-size": "24rpx",
      },
      fontSize: "24rpx",
      inputAlign: "right",
      form: {
        content: "",
      },
      detail: {},
      selectedItems: [],
      rules: {
        content: [
          {
            type: "string",
            required: true,
            message: "审批意见",
            trigger: ["blur"],
          },
        ],
      },
    };
  },
  computed: {
    hasLogin() {
      return this.$store.state.token && this.$store.state.token.length > 0;
    },
  },
  methods: {
    /**
     * 图片上传反馈
     * @param files 当前文件列表
     */
    handleFileChange(files) {
      console.log("当前文件列表:", files);
    },
    /**
     * 链接状态
     */
    changeLink(val) {
      console.log(val, "changeLink");
    },
    /**
     * 表单提交
     */
    async submitForm() {
      let action = await this.$refs.MyForm.validate();
      if (action) {
        // return;
        let imgArr = this.fileList.map((item) => {
          return item.path;
        });
        let data = {
          ...this.form,
          approveID: this.id,
        };
        this.loading = true;
        if (this.type == "1") {
          reject(data)
            .then((res) => {
              this.loading = false;
              this.$refs.toastRef.showToast({
                msg: "申请成功",
                duration: 3000,
                position: "center",
              });
              setTimeout(() => {
                uni.navigateBack();
              }, 1000);
            })
            .catch((e) => {
              this.loading = false;
              this.$refs.toastRef.showToast({
                msg: e.data.detail,
                duration: 3000,
                position: "center",
              });
            });
        } else if (this.type == "2") {
          approve(data)
            .then((res) => {
              this.loading = false;
              this.$refs.toastRef.showToast({
                msg: "重新发起成功",
                duration: 3000,
                position: "center",
              });
              setTimeout(() => {
                uni.navigateBack();
              }, 1000);
            })
            .catch((e) => {
              this.loading = false;
              this.$refs.toastRef.showToast({
                msg: e.data.detail,
                duration: 3000,
                position: "center",
              });
            });
        }

        console.log(this.form, "this.form");
      } else {
        uni.showToast({ title: "请完善表单", icon: "none" });
        return false;
      }
    },
    /**
     * 取消审批
     */
    cancelApprove() {
      let that = this;
      uni.showModal({
        title: "温馨提示",
        content: "你确定要取消审批吗？",
        showCancel: true,
        confirmText: "确定",
        success: (res) => {
          if (res.confirm) {
            cancelApprove({ approveID: that.id }).then((res) => {
              that.$refs.toastRef.showToast({
                msg: "取消成功",
                duration: 3000,
                position: "center",
              });
              setTimeout(() => {
                uni.navigateBack();
              }, 1000);
            });
          } else if (res.cancel) {
            return;
          }
        },
      });
    },
    /**
     * 获取详情
     */
    getInfo() {
      queryApproveDetailByID({ approveID: this.id }).then((res) => {
        console.log(res);
        this.form.approveID = res.data.approveID;
        this.detail = res.data;
      });
    },
  },
  onLoad(options) {
    this.type = options.type;
    this.id = options.id;
    if (this.id) {
      this.getInfo();
    }
  },
  onShow() {},
  onReady() {
    //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    this.$refs.MyForm.setRules(this.rules);
  },
  /**
   * 上拉加载更多
   */
  onReachBottom() {},
};
</script>
    <style>
page {
  background-color: #f5f7fb;
}
</style>
    
    <style lang="scss" scoped>
.pageLayout {
  padding: 40rpx;
  padding-bottom: 80rpx;
}
.base_info {
  background-color: #ffffff;
  padding: 24rpx;
  box-sizing: border-box;
  border-radius: 8rpx;
  margin-bottom: 24rpx;
}
.labelStyle {
  margin-bottom: 24rpx;
}
.submit-container {
  margin-top: 40rpx;
  padding: 20rpx;
  background-color: #f5f7fb;
}
.btn_width {
  width: 60%;
  margin: 60rpx auto;
}
.bot_btn {
  // background-color: #d52227;
  border-top: 1rpx solid #801c1b26;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  margin-top: 40rpx;
  // box-shadow: #a5a5a5 0px 0px 6px;
  padding: 20rpx;
  padding-bottom: 50rpx;
  background-color: white;
  box-sizing: border-box;
  .btn_width {
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
  }
}
</style>
    